<template>
  <div class="integral">
    <div class="table-toolbar">
      <el-select v-model="bidder" placeholder="请选择企业">
        <el-option
          v-for="item in business"
          :key="item.key"
          :label="item.name"
          :value="item.key">
        </el-option>
      </el-select>
      <el-select v-model="state" placeholder="请选择状态">
        <el-option
          v-for="item in states"
          :key="item.key"
          :label="item.name"
          :value="item.key">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="datetime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions2">
      </el-date-picker>
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="search"
        style="width:200px;">
      </el-input>
      <el-button type="primary" @click="getIntegral">查询</el-button>
      <el-button type="info" @click="clearSearchInfo">清空</el-button>
    </div>
    <el-table
      :data="this.integral"
      stripe
      @sort-change="sortChange"
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="100">
      </el-table-column>
      <el-table-column
        prop="bidsNo"
        label="标段编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="项目名称"
        label="项目名称"
        width="400">
      </el-table-column>
      <el-table-column
        prop="state"
        label="审核状态"
        sortable="custom">
        <template slot-scope="scope">
          <span style="">{{ scope.row.state==='auditing'?'审核中':(scope.row.state==='approved'?'审核通过':'审核未通过') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="applyTime"
        label="上传时间"
        sortable="custom"
        width="240"
      >
        <template slot-scope="scope">
          <span style="">{{formatTime(scope.row.applyTime)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 30px;text-align: right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Integral',
    data () {
      return {
        search: '',
        integral: [],
        pageNumber: 1,
        pageSize: 10,
        total: 0,
        sort: 'applyTime',
        asc: false,
        state: '',
        business: [],
        bidder: '',
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '清空',
            onClick (picker) {
              picker.$emit('pick', ['', ''])
            }
          }]
        },
        datetime: '',
        states: [
          {
            key: 'auditing',
            name: '审核中'
          }, {
            key: 'approved',
            name: '审核通过'
          }, {
            key: 'rejected',
            name: '审核未通过'
          }
        ]
      }
    },
    created () {
      this.getIntegral()
      this.getBusiness()
    },
    methods: {
      async getIntegral () {
        let res = await this.axios.post('/api/admin/bidding/application/query', {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          sort: '',
          search: this.search,
          state: this.state
        })
        if (res.data.state === 0) {
          this.integral = res.data.bizData.items
          this.total = res.data.bizData.totalItemCount
        }
      },
      async getBusiness () {
        let res = await this.axios.get('/api/bidding/application/bidders')
        if (res.data.state === 0) {
          this.bus = res.data.bizData.items
        }
      },
      clearSearchInfo () { //清空过滤条件
        this.search = ''
        this.status = ''
        this.datetime = ['', '']
      },
      sortChange (column) {
        this.sorts = {
          field: column.prop,
          order: column.order === 'ascending' ? -1 : 0
        }
        this.getIntegral()
      },
      handleSizeChange (val) {
        this.pageSize = val
      },
      handleCurrentChange (val) {
        this.currentPage = val
      },
      formatTime(value) {
        let datetime = new Date(value);
        let year = datetime.getFullYear();
        let month = datetime.getMonth() + 1
        month = month < 10 ? '0' + month : month
        let date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
        let hour = datetime.getHours() < 10 ? '0' + datetime.getHours() : datetime.getHours()
        let min = datetime.getMinutes() < 10 ? '0' + datetime.getMinutes() : datetime.getMinutes()
        let s = datetime.getSeconds() < 10 ? '0' + datetime.getSeconds() : datetime.getSeconds()
        return year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + s
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" type="text/stylus">
  .integral
    display block
    position absolute
    height 100%
    width 100
    margin 10px

  .el-pagination button, .el-pagination span:not([class*=suffix])
    font-size 16px

  .el-table
    font-size 16px

  .table-toolbar
    padding 10px 0
    text-align right
    > *
      margin-left 30px
</style>
